import React from 'react'
import { render, hydrate} from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'mobx-react'
import App from './views/App'
import appState from './store/app-state'

// render(
//     <App/>, 
//     document.getElementById('root')
// )
const root = document.getElementById('root');
const renderDom = (App) => {
    hydrate(
        <AppContainer>
            <Provider appState={appState}>
                <BrowserRouter>
                    <App/>
                </BrowserRouter>
            </Provider>
        </AppContainer>
        , 
        root
    )
}

renderDom(App)

if(module.hot){
    module.hot.accept("./views/App", () => {
        const NextApp = require("./views/App").default
        renderDom(NextApp)
    })
}